<template>
  <div class="common-layout">
    <el-container>
      <el-header height="60px">
        <div class="header-content">
          <div class="logo" @click="$router.push('/')">
            <h2>购物商城</h2>
          </div>
          <el-menu 
            :default-active="activeIndex" 
            mode="horizontal" 
            @select="handleSelect"
            class="nav-menu"
          >
            <el-menu-item index="/">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/products">
              <el-icon><Goods /></el-icon>
              <span>商品列表</span>
            </el-menu-item>
            <el-menu-item index="/cart" v-if="userStore.isAuthenticated()">
              <el-icon><ShoppingCart /></el-icon>
              <span>购物车</span>
            </el-menu-item>
            <el-menu-item index="/orders" v-if="userStore.isAuthenticated()">
              <el-icon><Document /></el-icon>
              <span>我的订单</span>
            </el-menu-item>
            <el-menu-item index="/product-management" v-if="userStore.isAuthenticated() && (userStore.role === 1 || userStore.role === 2)">
              <el-icon><Setting /></el-icon>
              <span>商品管理</span>
            </el-menu-item>
          </el-menu>
          <div class="user-actions">
            <template v-if="userStore.isAuthenticated()">
              <span class="user-info">
                <el-avatar :size="32" :src="userStore.userInfo?.avatar">
                  <el-icon><User /></el-icon>
                </el-avatar>
                <span class="username">{{ userStore.userInfo?.username || '用户' }}</span>
              </span>
              <el-button type="text" @click="logout">
                <el-icon><SwitchButton /></el-icon>
                退出
              </el-button>
            </template>
            <template v-else>
              <el-button type="primary" @click="$router.push('/login')">
                <el-icon><User /></el-icon>
                <span>登录</span>
              </el-button>
            </template>
          </div>
        </div>
      </el-header>
      
      <el-main>
        <router-view />
        
        <!-- 全局错误提示 -->
        <el-alert 
          v-if="error" 
          type="error" 
          :message="error" 
          show-icon 
          closable
          @close="error = null"
          class="global-error"
        />
      </el-main>
      
      <el-footer>
        <div class="footer-content">
          <div class="footer-links">
            <a href="#" @click.prevent>关于我们</a>
            <a href="#" @click.prevent>联系我们</a>
            <a href="#" @click.prevent>帮助中心</a>
            <a href="#" @click.prevent>隐私政策</a>
          </div>
          <p>&copy; 2024 购物商城. 保留所有权利.</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { ref, computed, onMounted, defineComponent } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  House,
  Goods,
  Document,
  User,
  ShoppingCart, 
  SwitchButton,
  Setting,
} from '@element-plus/icons-vue';
import request from '@/utils/request';

export default defineComponent({
  name: 'MainApp',
  components: {
    House,
    Goods,
    Document,
    User,
    ShoppingCart,
    SwitchButton,
    Setting,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const userStore = useUserStore();
    const error = ref(null);
    const activeIndex = computed(() => route.path);
    const handleSelect = (key) => {
      if (!userStore.isAuthenticated() && (key === '/cart' || key === '/orders')) {
        ElMessage.warning('请先登录');
        router.push('/login');
        return;
      }
      router.push(key);
    };
    const logout = () => {
      ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userStore.logout();
        ElMessage.success('已退出登录');
        router.push('/');
      }).catch(() => {
        // 用户取消
      });
    };
    const fetchUserInfo = async () => {
      if (userStore.isAuthenticated()) {
        try {
          const response = await request.get('/user/info', { params: { userId: userStore.userId } });
          if (response.code === 200) {
            userStore.setUserInfo(response.data);
          }
        } catch (error) {
          console.error('获取用户信息失败:', error);
        }
      }
    };
    onMounted(() => {
      fetchUserInfo();
    });
    return {
      userStore,
      activeIndex,
      error,
      handleSelect,
      logout
    };
  }
});
</script>

<style>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
}

.common-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-container {
  flex: 1;
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.logo h2 {
  margin: 0;
  color: #409eff;
  font-size: 24px;
  font-weight: 600;
}

.nav-menu {
  flex: 1;
  margin-left: 40px;
  border-bottom: none;
}

.nav-menu .el-menu-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.el-main {
  padding: 20px 0;
  min-height: calc(100vh - 120px);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.el-footer {
  background-color: #2c3e50;
  color: #fff;
  padding: 30px 0;
}

.footer-content {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-links {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.footer-links a {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-content p {
  margin: 0;
  color: #95a5a6;
  font-size: 14px;
}

.global-error {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  max-width: 400px;
}

/* 全局样式优化 */
.el-button {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-card {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.el-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.el-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.el-input {
  border-radius: 6px;
}

.el-select {
  border-radius: 6px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 15px;
  }
  
  .logo h2 {
    font-size: 20px;
  }
  
  .nav-menu {
    margin-left: 20px;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 15px;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 加载动画 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}

/* 页面切换动画 */
.page-enter-active,
.page-leave-active {
  transition: all 0.3s ease;
}

.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>
